<template>
    <wd-action-sheet v-model="showPayPassword">
        <view class="text-center py-4"> 支付 </view>
        <view class="h-60vh">
            <!-- 密码输入框 -->
            <wd-password-input v-model="payPassword" :focused="showKeyboard" @focus="showKeyboard = true" />
            <!-- 数字键盘 -->
            <wd-number-keyboard v-model="payPassword" v-model:visible="showKeyboard" :maxlength="6" @blur="showKeyboard = false" />
        </view>
    </wd-action-sheet>
    <wd-toast />
</template>

<script setup>
import { ref, watch } from "vue";
import { useToast } from "wot-design-uni";
import { pay } from "../api/order";

const props = defineProps({
    orderNo: {
        requred: true,
        type: String,
    },
    remark: {
        type: String,
        default: "",
    },
    orderItems: {
        required: true,
        type: Array,
    },
    onSuccess: Function,
});
const emit = defineEmits(["success"]);
const showPayPassword = ref(false);
const payPassword = ref("");
const showKeyboard = ref(false);

const toast = useToast();
watch(payPassword, async newV => {
    if (newV.length === 6) {
        await pay({
            orderNo: props.orderNo,
            payPassword: payPassword.value,
            remark: props.remark,
            orderItems: props.orderItems,
        });
        toast.success("支付成功");
		console.log(props);
        if (props.onSuccess) {
            emit("success");
			showPayPassword.value = false;
			showKeyboard.value = false;
        } else {
            setTimeout(() => {
                uni.redirectTo({
                    url: "/pages/orderList/orderList",
                });
            }, 1200);
        }
    }
});

defineExpose({
    open: () => {
        showPayPassword.value = true;
        showKeyboard.value = true;
    },
});
</script>
